<template>
	<div>
		<div class="el-one">
			<div class="card-one">
				<el-card>
					<div class="title">冷站</div>
					<div class="nh_css">
						<div>能耗：
							<el-select v-model="value" style="width: 120px" size="small">
								<el-option label="RMB" value="RMB"/>
								<el-option label="kWh" value="kWh"/>
								<el-option label="KgCO2" value="KgCO2"/>
								<el-option label="tce" value="tce"/>
							</el-select>
						</div>

						<div class="ms">
							<p>当年（去年）<span class="pFont">2,560,080</span><span class="ps">(2,235,080)</span></p>
							<p style="margin-right: 50px">当月（去年同月）<span class="pFont">123,080</span> <span class="ps">(1,080)</span>
							</p>
						</div>
						<p>当日（昨日）<span class="pFont">500</span><span class="ps">(500)</span></p>
						<div class="ms">
							<p>冷站效率（累计）：<span class="pFont">5.2</span><span class="ps">KW/kw</span><span class="pFont"
																										 style="margin-left: 40px">0.61</span><span
								class="ps">kw/ton</span></p>
							<p>冷站效率（实时）：<span class="pFont">5.6</span><span class="ps">KW/kw</span><span class="pFont"
																										 style="margin-left: 40px">0.63</span><span
								class="ps">kw/ton</span></p>
						</div>

					</div>
					<div class="ech-one">
						<div style="height: 300px">
							<scEcharts :option="option1"></scEcharts>
						</div>
						<div class="rq">
							<el-date-picker
								v-model="time"
								type="daterange"
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								size="small"
								style="width: 210px"
							/>
						</div>
					</div>

					<div class="ech-two">
						<div style="height: 300px">
							<scEcharts :option="option2"></scEcharts>
						</div>
						<div class="rq">
							<el-select v-model="select" style="width: 80px" size="small">
								<el-option label="kWh" value="kWh"/>
								<el-option label="kWh/%" value="kWh/%"/>
							</el-select>
						</div>
					</div>
				</el-card>
			</div>
			<div class="card-two">
				<el-card>
					<div class="title">实时运行参数</div>
					<div class="head">
						<p>冷机运行台数：<span class="pFont">1</span><span class="ps">台</span></p>
						<p>总功率：<span class="pFont">365.6</span><span class="ps">kw</span></p>
						<p>冷量：<span class="pFont">306.6</span><span class="ps">ton</span></p>
					</div>
				</el-card>
				<el-card style="margin-top: 13px">
					<div class="centt">
						<div class="titles">热平衡</div>
						<div>
							<el-date-picker
								v-model="time1"
								type="daterange"
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								style="width:200px;margin: 0 20px"
								size="small"
							/>
						</div>
					</div>
					<div class="qwe">
						<div style="height: 250px">
							<scEcharts :option="option3"></scEcharts>
						</div>

						<div class="reph">
							<div>热平衡率</div>
							<div><span class="pFont">98%</span><span class="ps">（95 150%）</span></div>
						</div>
					</div>
				</el-card>
				<el-card style="margin-top: 13px;height: 336px">
					<div class="shebei">
						<div>设备运行时间（小时）</div>
						<div>
							<el-date-picker
								v-model="time2"
								type="daterange"
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								style="width:200px;margin: 0 20px"
								size="small"
							/>
						</div>
					</div>
					<div class="tabl">
						<el-table :data="tableData" border
								  :cell-style="{color:'#7695d1'}"
								  :header-cell-style="{backgroundColor:'#fcfdfe'}">
							<el-table-column label="冷机" align="center">
								<el-table-column prop="one" label="#1冷机" align="center"/>
								<el-table-column prop="ones" label="#2冷机" align="center"/>
							</el-table-column>
							<el-table-column prop="two" label="冷冻泵" align="center"/>
							<el-table-column prop="three" label="冷却泵" align="center"/>
							<el-table-column prop="four" label="冷却塔" align="center"/>
						</el-table>
					</div>
				</el-card>
			</div>
		</div>
		<div class="el-two">
			<div class="card-one">
				<el-card>
					<div class="title">用能成本分析（冷量）</div>
					<div class="head">
						<div>累计用能成本<span class="pFont">0.632</span><span class="ps">RMB/kWh</span></div>
						<div>当月用能成本<span class="pFont">0.632</span><span class="ps">RMB/kWh</span></div>
						<div>当日用能成本<span class="pFont">0.632</span><span class="ps">RMB/kWh</span></div>
					</div>
					<div class="head_ss">
						<el-select v-model="select1" style="width: 80px" size="small">
							<el-option label="小时" value="小时"/>
						</el-select>
						<el-date-picker
							v-model="time3"
							type="daterange"
							range-separator="至"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							style="width:200px;margin: 0 20px"
							size="small"
						/>
					</div>
					<div style="height: 300px">
						<scEcharts :option="option4"></scEcharts>
					</div>
				</el-card>
			</div>
			<div class="card-two">
				<el-card>
					<div class="title">峰平谷分析</div>
					<div class="hea-one">
						<ul>
							去年累计电量
							<li>总 <span class="mm">32,000</span><span class="nn">kWh</span></li>
							<li>峰 <span class="mm">32,000</span><span class="nn">26.03%</span></li>
							<li>平 <span class="mm">32,000</span><span class="nn">26.03%</span></li>
							<li>台 <span class="mm">32,000</span><span class="nn">26.03%</span></li>
						</ul>

						<ul>
							该段时间内
							<li>总 <span class="mm">32,000</span><span class="nn">kWh</span></li>
							<li>峰 <span class="mm">32,000</span><span class="nn">26.03%</span></li>
							<li>平 <span class="mm">32,000</span><span class="nn">26.03%</span></li>
							<li>台 <span class="mm">32,000</span><span class="nn">26.03%</span></li>
						</ul>
						<div class="con-two">
							<el-select v-model="select3" style="width: 80px" size="small">
								<el-option label="小时" value="小时"/>
							</el-select>
							<el-date-picker
								v-model="time5"
								type="daterange"
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								style="width:200px;margin: 0 20px"
								size="small"
							/>
						</div>
					</div>
					<div class="con">
						<div class="con-one">峰平谷用能分析</div>
						<div class="con-two">
							<el-select v-model="select2" style="width: 80px" size="small">
								<el-option label="小时" value="小时"/>
							</el-select>
							<el-date-picker
								v-model="time4"
								type="daterange"
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								style="width:200px;margin: 0 20px"
								size="small"
							/>
						</div>
					</div>
					<div style="height: 182px">
						<scEcharts :option="option5"></scEcharts>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script setup>
import scEcharts from "@/components/scEcharts";
import {reactive, ref} from "vue";

const value = ref('kWh')
const time = ref('')
const time1 = ref('')
const time2 = ref('')
const time3 = ref('')
const time4 = ref('')
const time5 = ref('')
const select = ref('kWh')
const select1 = ref('小时')
const select2 = ref('月')
const select3 = ref('全部')
const option1 = reactive({
	title: {
		text: '冷站效率分项',
		textStyle: {
			color: '#aaacab',
		},
		top: 30
	},
	legend: {
		data: ['制冷机', '冷却水泵', '冷冻水泵', '冷却塔风机'],
		left: 270,
		top: 30,
		itemWidth: 15,
		itemHeight: 1,
	},
	grid: {
		left: '1%',
		right: '1%',
		bottom: '10%',
		top: '35%',
		containLabel: true
	},
	xAxis: {
		name: '日',
		data: ['4/20', '4/21', '4/22', '4/23', '4/24', '4/25', '4/26', '4/27', '4/28', '4/29']
	},
	yAxis: {
		name: 'KW/ton',
		type: 'value',
		axisLine: {
			// x轴线隐藏，但不隐藏背景线
			show: true,
		},
	},
	tooltip: {
		trigger: 'axis',
	},
	series: [
		{
			name: '制冷机',
			type: 'line',
			stack: 'Total',
			data: [12, 32, 11, 34, 20, 30, 10, 15, 31, 35],
			color: '#d90909'
		},
		{
			name: '冷却水泵',
			type: 'line',
			stack: 'Total',
			data: [22, 18, 11, 24, 29, 33, 30, 32, 11, 34],
			color: '#FFC40F'
		},
		{
			name: '冷冻水泵',
			type: 'line',
			stack: 'Total',
			data: [15, 22, 21, 14, 19, 30, 10, 15, 16, 20],
			color: '#CCCCCC'
		},
		{
			name: '冷却塔风机',
			type: 'line',
			stack: 'Total',
			data: [20, 22, 12, 14, 19, 13, 20, 21, 15, 16],
			color: '#0384DD'
		},
	]
})
const option2 = reactive({
	title: {
		text: '设备用能占比',
		textStyle: {
			color: '#aaacab',
		},
		left: 23,
		top: 20
	},
	legend: {
		orient: 'vertical',
		right: 30,
		bottom: 25,
		itemWidth: 15
	},
	tooltip: {
		trigger: 'axis',
	},
	grid: {
		left: '3%',
		right: '15%',
		bottom: '3%',
		top: '30%',
		containLabel: true
	},
	dataset: {
		source: [
			['product', '2019', '2020', '2021', '2022'],
			['制冷机', 200, 150, 100, 205],
			['冷却泵', 100, 150, 55.1, 200],
			['冷冻泵', 158, 210, 82.5, 140],
			['冷却塔', 100, 150, 200, 179]
		]
	},
	xAxis: {type: 'category'},
	yAxis: {
		name: 'RMB/m²', axisLine: {
			// x轴线隐藏，但不隐藏背景线
			show: true,
		},
	},
	series: [
		{type: 'bar', barGap: 0, color: '#90cd50'},
		{type: 'bar', barGap: 0, color: '#ffc000'},
		{type: 'bar', barGap: 0, color: '#d6ebfa'},
		{type: 'bar', barGap: 0, color: '#0070c0'},
	]
})
const option3 = reactive({
	title: {
		text: '热平衡率趋势线',
		textStyle: {
			color: '#8f9898',
		},
		top: 2,
		left: 115
	},
	xAxis: {
		name: '日',
		data: ['4/20', '4/21', '4/22', '4/23', '4/24', '4/25', '4/26', '4/27', '昨日', '今日']
	},
	yAxis: {
		name: '%',
		type: 'value',
		axisLine: {
			// x轴线隐藏，但不隐藏背景线
			show: true,
		},
	},
	grid: {
		left: '15%',
		right: '7%',
		bottom: '10%',
		top: '25%',
		containLabel: true
	},
	tooltip: {
		trigger: 'axis',
	},
	series: [
		{
			data: [2, 6, 10, 11, 6, 3, 11, 2, 8, 3],
			type: 'line',
			smooth: true,
			areaStyle: {
				color: '#fdf2ce',
				opacity: 0.5
			},
			color: '#ffc40f'
		}
	]
})
const option4 = reactive({
	title: {
		text: '用能成本分析',
		textStyle: {
			color: '#8f9898',
		},
		left: 20,
		top: 13,
	},
	xAxis: {
		name: '日',
		data: ['4/20', '4/21', '4/22', '4/23', '4/24', '4/25', '4/26', '4/27', '昨日', '今日']
	},
	yAxis: {
		name: '%',
		type: 'value',
		axisLine: {
			// x轴线隐藏，但不隐藏背景线
			show: true,
		},
	},
	grid: {
		left: '3%',
		right: '7%',
		bottom: '10%',
		top: '25%',
		containLabel: true
	},
	tooltip: {
		trigger: 'axis',
	},
	series: [
		{
			data: [2, 6, 10, 11, 6, 3, 11, 2, 8, 3],
			type: 'line',
			smooth: true,
			areaStyle: {
				color: '#fdf2ce',
				opacity: 0.5
			},
			color: '#ffc40f'
		}
	]
})
const option5 = reactive({
	tooltip: {
		trigger: 'axis',
	},
	legend: {
		orient: 'vertical',
		right: 30,
		bottom: 25,
		itemWidth: 15
	},
	grid: {
		left: '3%',
		right: '15%',
		bottom: '3%',
		containLabel: true
	},
	xAxis: [
		{
			name: '月',
			data: ['1月', '2月', '3月', '4月', '5月', '7月', '8月', '9月', '10月', '11月', '12月']
		}
	],
	yAxis: [
		{
			type: 'value',
			name: "kWh",
			axisLine: {
				// x轴线隐藏，但不隐藏背景线
				show: true,
			},
		}
	],
	series: [
		{
			name: '冷却塔',
			type: 'bar',
			stack: 'Ad',
			emphasis: {
				focus: 'series'
			},
			data: [120, 132, 101, 134, 90, 230, 210, 130, 150, 200, 130],
			color: '#90cd50'
		},
		{
			name: '冷冻泵',
			type: 'bar',
			stack: 'Ad',
			emphasis: {
				focus: 'series'
			},
			data: [220, 182, 191, 234, 290, 330, 310, 101, 134, 90, 230],
			color: '#FFC40F'
		},
		{
			name: '冷却泵',
			type: 'bar',
			stack: 'Ad',
			emphasis: {
				focus: 'series'
			},
			data: [150, 232, 201, 154, 190, 330, 410, 182, 191, 234, 290, 167],
			color: '#EAF2FA'
		},
		{
			name: '制冷机',
			type: 'bar',
			stack: 'Ad',
			emphasis: {
				focus: 'series'
			},
			data: [150, 232, 201, 104, 290, 310, 101, 232, 201, 330, 187],
			color: '#0070c0'
		},
	]
})
const tableData = ref([
	{
		one: 105,
		ones: 0,
		two: '',
		three: '',
		four: ''
	},
	{
		one: 105,
		ones: 0,
		two: '',
		three: '',
		four: ''
	},
	{
		one: 105,
		ones: 0,
		two: '',
		three: '',
		four: ''
	},
	{
		one: 105,
		ones: 0,
		two: '',
		three: '',
		four: ''
	},
])

</script>

<style scoped lang="scss">
:deep( .el-card__body) {
	padding: 0;
}

.el-one {
	display: flex;

	.card-one {
		flex: 1;
		margin-right: 8px;

		.title {
			padding: 20px;
			font-size: 20px;
			color: #6d83b7;
			font-weight: 600;
			border-bottom: 2px solid #f3f5f9;
		}

		.nh_css {
			margin: 15px 20px 0;
			font-size: 17px;
			color: #aaacab;
			padding-bottom: 20px;
			border-bottom: 2px dashed #f0f2f7;

			p {
				margin: 10px 0;
				font-size: 17px;
				color: #90979e;

				.pFont {
					font-size: 20px;
					color: #7695d1;
					margin: 0 5px 0 10px;
				}

				.ps {
					font-size: 10px;
				}
			}

			.ms {
				display: flex;
				justify-content: space-between;
			}
		}

		.ech-one {
			position: relative;
			margin: 0 20px 0;
			border-bottom: 2px dashed #f0f2f7;

			.rq {
				position: absolute;
				top: 27px;
				right: 1px;
			}
		}

		.ech-two {
			position: relative;

			.rq {
				position: absolute;
				top: 25px;
				right: 10px;
			}
		}
	}

	.card-two {
		flex: 1;
		margin-left: 8px;

		.title {
			padding: 20px;
			font-size: 20px;
			color: #6d83b7;
			font-weight: 600;
			border-bottom: 2px solid #f3f5f9;
		}

		.centt {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2px solid #f3f5f9;

			.titles {
				padding: 20px;
				font-size: 20px;
				color: #6d83b7;
				font-weight: 600;
			}
		}

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 20px;

			p {
				margin: 10px 0;
				font-size: 17px;
				color: #90979e;

				.pFont {
					font-size: 20px;
					color: #7695d1;
					margin: 0 5px 0 20px;
				}

				.ps {
					font-size: 10px;
				}
			}
		}

		.qwe {
			position: relative;
			margin: 15px 20px;


			.reph {
				position: absolute;
				bottom: 16%;
				left: 0;
				font-size: 15px;
				color: #8a8c8a;

				.pFont {
					font-size: 20px;
					color: #7695d1;
				}

				.ps {
					font-size: 10px;
				}

			}
		}

		.shebei {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			font-size: 20px;
			color: #6d83b7;
			font-weight: 600;
			border-bottom: 2px solid #f3f5f9;
		}

		.tabl {
			margin: 10px 20px;
		}
	}
}

.el-two {
	display: flex;
	margin-top: 16px;

	.card-one {
		flex: 1;
		margin-right: 8px;

		.title {
			padding: 20px;
			font-size: 20px;
			color: #6d83b7;
			font-weight: 600;
			border-bottom: 2px solid #f3f5f9;
		}

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;

			div {
				margin: 10px 0;
				font-size: 15px;
				color: #90979e;

				.pFont {
					font-size: 20px;
					color: #7695d1;
					margin-left: 10px;
				}

				.ps {
					font-size: 10px;
				}
			}
		}

		.head_ss {
			display: flex;
			justify-content: right;
			align-items: center;
			margin-bottom: 10px;
		}
	}

	.card-two {
		flex: 1;
		margin-left: 8px;

		.title {
			padding: 20px;
			font-size: 20px;
			color: #6d83b7;
			font-weight: 600;
			border-bottom: 2px solid #f3f5f9;
		}

		.hea-one {
			display: flex;
			justify-content: space-between;
			font-size: 17px;
			color: #8f9898;
			margin: 15px 0 10px 50px;

			ul {
				list-style: none;

				li {
					margin: 10px 0;

					.mm {
						font-size: 20px;
						color: #548cd0;
						margin-left: 10px;
					}

					.nn {
						font-size: 15px;
						margin-left: 5px;
						color: #548cd0;
					}
				}
			}

			.con {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.con {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0 10px 23px;

			.con-one {
				color: #8f9898;
				font-size: 17px;
				font-weight: 600;
			}
		}

	}
}

.con-two {
	display: flex;
	justify-content: center;
}
</style>
